<template>
  <mt-popup v-model="popupVisible" position="right" :modal="false" class="contract-view">
    <div class="page padding-safe-area-bottom">
      <div class="scroll-view">
        <customHeader middleTitle="软件服务合同" @leftCallBack="popupHide"></customHeader>
        <div class="page-body">
          <p class="tr mb30">合同编号：{{contractParams.contractId||'-'}}</p>
          <p>甲方（供方）：<span class="fb">云纵世纪（天津）数字科技有限公司</span></p>
          <p>乙方（需方）：<span class="fb">{{contractParams.supplierName}}</span></p>
          <p class="t2 mt20">甲乙双方本着平等互利的原则，根据《中华人民共和国合同法》及其它相关法律、法规的有关规定，经甲乙双方友好协商，就乙方向甲方购买管理系统的软件及服务（以下简称“产品”）订立本合同,以便共同守信。具体条款如下：</p>
          <p class="contract-title mb20">第一条 乙方向甲方购买的软件及服务项目，明细如下：</p>
          <table>
            <tr><td colspan="7" class="bg">软件产品</td></tr>
            <tr>
              <td>软件名称</td>
              <td>软件功能</td>
              <td>数量</td>
              <td>单位</td>
              <td>单价/元</td>
              <td>付款类型</td>
              <td>备注</td>
            </tr>
            <tr v-if="contractParams.goodsName">
              <td class="f16"><div>{{contractParams.goodsName}}</div></td>
              <td class="f16"><div>聚合支付+营销</div></td>
              <td class="f16"><div>1</div></td>
              <td class="f16"><div>个</div></td>
              <td class="f16"><div>{{enNumber}}</div></td>
              <td class="f16"><div>支付宝收款</div></td>
              <td class="f16"><div>\</div></td>
            </tr>
            <tr>
              <td colspan="2" class="bg">上门、安装施工及耗材费用</td>
              <td colspan="5" class="tc">\元</td>
            </tr>
            <tr>
              <td colspan="2" class="bg">以上费用共计</td>
              <td colspan="5" class="tc">{{enNumber}}元</td>
            </tr>
          </table>
          <p>1、以上合同金额合计¥ {{enNumber}}元（大写人民币： {{zhNumber}}）。合同金额不包括移动支付的费用，乙方选用的移动支付服务为第三方移动支付服务；本合同金额是乙方向甲方支付软件使用费用，甲方收到乙方支付的软件使用费后一概不予退费。</p>
          <p>2、提供服务过程中，如涉及第三方移动支付服务，适用本款以下约定：</p>
          <div class="pl35">
            <p>2.1 甲方与第三方支付机构签订相关协议，通过技术开发为乙方客户在乙方所消费款项的线上支付提供相应技术服务与支持，最终由第三方机构负责完成乙方客户在乙方所消费的款项结算事宜（以下简称“第三方支付服务”）。</p>
            <p>2.2 对接第三方支付平台时，可能产生的第三方平台收取的相关费用，由乙方自行承担。</p>
            <p>2.3 乙方应书面告知甲方，已按第三方要求提交了合格的相关资质资料并通过了第三方审核，甲方为乙方开通第三方支付服务。</p>
          </div>
          <p class="contract-title">第二条 服务期限与交付时间、地点</p>
          <p>1、甲方为乙方所提供的软件产品须按年付费的功能，服务期限自账号开通之日起计算。首次续费乙方应在服务期届满前15个工作日进行续费，因未能及时续费造成的服务中断或由此带来的后果由乙方承担。</p>
          <p>2、甲方收到本合同全额款项之日的5个工作日内，甲方为乙方开通本合同已收款项的软件产品账户权限，并完成账户交付。</p>
          <p class="contract-title">第三条 付款方式</p>
          <p>1、乙方向甲方支付本合同项下的全部款项，即 {{enNumber}}元，大写人民币 {{zhNumber}}）。乙方付款后向甲方提供付款截图，便于甲方及时核查乙方支付款项。</p>
          <p>2、乙方付款信息：</p>
          <p>付款账户名称：<span class="underline">\</span></p>
          <p>付款开户银行：<span class="underline">\</span></p>
          <p>付款账号：<span class="underline">\</span></p>
          <p>付款支付宝账号：<span class="underline">\</span></p>
          <p>3、甲方收款账户信息如下：</p>
          <p>账户名称： 云纵世纪（天津）数字科技有限公司</p>
          <p>开户银行：招商银行天津新港支行</p>
          <p>账号：1229 0899 2310 802</p>
          <p>支付宝账号：yzsj01@yunzongnet.com</p>
          <p class="contract-title">第四条 甲方权利义务：</p>
          <p>1、甲方有权通过包括但不限于互联网等任何媒介编辑、使用、陈列、引用、复制、出版、公开展示和传播跟商品有关的商号、商标、服务标记等乙方提供的所有素材。</p>
          <p>2、何情况下，甲方因履行本合同向乙方实际支付的包括违约赔偿金在内的所有款项总额，不超过甲方实际收取的费用之和。</p>
          <p>3、甲方免费提供乙方人员对软件的上机培训。乙方给予配合，并做好因人事异动的内部交接培训，如需二次培训，甲方根据实际情况进行收取培训费。</p>
          <p class="contract-title">第五条 乙方权利义务</p>
          <p>1、乙方保证所提供给甲方包括但不限于资质文件须真实有效合法，如因乙方提供的资质文件包括但不限于伪造、变造、虚假导致任何法律纠纷或乙方提供的资质文件导致后续系统使用的过程中出现问题，则乙方自行承担全部后果包括刑事责任，甲方不承担任何责任。</p>
          <p>2、乙方不得利用智慧餐厅管理系统从事下列行为：</p>
          <div class="pl35">
            <p>2.1 危害国家安全、泄露国家秘密，侵犯国家的、社会的、集体的利益和公民的合法权益，从事违法犯罪活动；</p>
            <p>2.2 煽动抗拒、破坏宪法和法律、行政法规实施的；</p>
            <p>2.3 煽动颠覆国家政权，推翻社会主义制度的；</p>
            <p>2.4 煽动分裂国家、破坏国家统一的；</p>
            <p>2.5 煽动民族仇恨、民族歧视，破坏民族团结的；</p>
            <p>2.6 造或者歪曲事实，散布谣言，扰乱社会秩序的；</p>
            <p>2.7 宣扬封建迷信、淫秽、色情、赌博、暴力、凶杀、恐怖，教唆犯罪的；</p>
            <p>2.8 公然侮辱他人或者捏造事实诽谤他人的；</p>
            <p>2.9 损害国家机关信誉的；</p>
            <p>2.10 其他违反宪法和法律、行政法规的。</p>
          </div>
          <p>3、乙方应按照本合同的约定支付各项费用。</p>
          <p>4、除由甲乙方共同享有的乙方使用系统所产生的其自身的交易数据外，乙方不得对甲方任何数据作商业性利用，包括但不限于在未经甲方事先书面批准的情况下，以复制、传播或向他方披露等任何方式使用用户信息，否则造成用户损失的，由乙方自行向用户承担赔偿责任，与甲方无关。</p>
          <p class="contract-title">第六条 产品及服务保证</p>
          <p>1、在服务期限内，软件生产商将免费提供软件产品维护，软件产品维保期内，软件生产商提供的产品维护范围包括：软件的版本升级，软件的正常运行及维护。</p>
          <p>2、乙方提出软件的标准功能以外的需求，均视为新增功能，如果乙方要求新增功能，双方另行签订合同。</p>
          <p>3、下述原因引发的软件问题不在此保证的范围内：</p>
          <div class="pl35">
          <p>A. 乙方之外的任何人对该许可软件作任何方式的修改；</p>
          <p>B. 由于乙方原因、第三方产品的故障、第三方平台API的故障、计算机设备故障、网络故障等使软件无法正常运行。</p>
          </div>
          <p class="contract-title">第七条 实施与服务</p>
          <p>1、软件实施：甲方向乙方提供软件实施服务，同时为乙方安装软件，并进行软件初始化服务。</p>
          <p>2、版本升级：如软件生产商软件版本更新后，免费（除软件商收费的或定制开发外）为乙方提供同一软件版本升级服务。</p>
          <p>3、使用指导：软件生产商向乙方提供终身免费远程技术服务和使用指导。 </p>
          <p>4、软件维护期间，乙方有义务针对软件生产商维护工作提供必要的相关资源，资料和协助工作。</p>
          <p>5、由于意外因素、病毒或人为恶意删改程序、数据等而提出的服务要求不在甲方提供服务之中，但甲方可以提供免费咨询，如果由于乙方操作不当导致的数据丢失后果由乙方承担。</p>
          <p class="contract-title">第八条 合同终止</p>
          <p>如果本合同终止，但乙方此时有导出数据的要求，乙方应在本合同终止后的十个工作日内书面联系甲方，软件生产商可向乙方提供一个关于相关数据信息的文件或获取文件的方法，以保证乙方及时、安全、完整的获得有关数据信息，如乙方未能在上述期限内联系软件生产商，软件生产商将不再承诺任何保留数据的义务。</p>
          <p class="contract-title">第九条 保密条款</p>
          <p>双方承诺对于在安装、调试、培训、实施、使用、维护许可软件的过程中接触和了解的有关对方技术、经营等方面的商业秘密信息、资料、文档等，双方均有严格保密的义务。</p>
          <p class="contract-title">第十条 违约责任</p>
          <p>如乙方未按期付款，甲方有权相应的延期开通服务。</p>
          <p class="contract-title">第十一条 反商业贿赂条款：</p>
          <p>1、双方均反对任何形式的商业贿赂行为。乙方承诺乙方或乙方董事、股东、员工、本合同的经办人、收款人、签约人、联系人与甲方员工及经办人没有直系、旁系亲属在内的任何意义上的关联关系，同时不得给予甲方相关人员以任何形式的利益（包括但不限于回扣、有价证券、贵重礼品、旅游、特殊招待、未经备案的关联交易或其他利益），否则视为乙方严重违约，甲方有权终止本协议并追究乙方违约责任。</p>
          <p>2、乙方通过乙方账户、乙方员工账户、本合同经办人账户向甲方经办人或甲方员工及其亲属或具有利害关系、关联关系的私人账户或公司账户汇款，且未在合同签署前以加盖乙方公章的书面形式披露的，视为商业贿赂行为。</p>
          <p>3、上述约定一经违反即视为乙方严重违约，甲方有权向乙方追索人民币10万元作为违约金。</p>
          <p>若甲方任何职员要求给予其任何形式的不当利益，乙方应立即通过本条第5款所述电子邮件通知甲方，甲方查实后必公正处理，并为此保密；同时，甲方将根据具体情况，给予乙方更多的优惠的商业机会。 </p>
          <p class="contract-title">第十二条 争议的解决</p>
          <p>本合同未尽事宜，双方协商解决。凡因执行本合同所发生的一切争执，双方友好协商解决，如协商不成，任何一方可向北京市海淀区人民法院提交诉讼解决。</p>
          <p class="contract-title">第十三条 其他</p>
          <p class="mb50">此合同一式二份，甲乙双方各保存一份。本合同自双方签字盖章后生效。</p>
          <p>甲方: 云纵世纪（天津）数字科技有限公司 </p>
          <p>代表人：谷光</p>
          <p class="mb50">签订日期: {{createTime}}</p>
          <p>乙方: {{contractParams.supplierName}}</p>
          <p>代表人：{{contractParams.contractor}}</p>
          <p>签订日期: {{createTime}}</p>
        </div>
        <div class="btn-wrap" v-if="pay">
          <div class="disabled" v-if="contractTime">阅读{{contractTime}} 秒后点击支付</div>
          <div @click="pay" v-else>立即支付</div>
        </div>
      </div>
    </div>
  </mt-popup>
</template>

<script>
import {Toast} from "mint-ui";
import moment from 'moment';
import customHeader from "@/components/header/header";

export default {
  name: "contract",
  props: {
    params: {
      type: Object,
      default: {}
    },
    pay: {
      type: Function
    }
  },
  components: {
    customHeader
  },
  data() {
    return {
      popupVisible: false,
      contractTimer: null,
      contractTime: 5,
      contractParams: {}
    };
  },
  computed: {
    enNumber() {
      let num = '';
      if(this.contractParams.totalAmount) {
        // num = (+this.contractParams.totalAmount).toLocaleString('en-US', {minimumFractionDigits: 2});
        num = (+this.contractParams.totalAmount).toFixed(2);
        let parts = num.toString().split('.')
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
        num = parts.join('.');
      }
      return num;
    },
    zhNumber() {
      return this.contractParams.totalAmount ? this.numTransform(this.contractParams.totalAmount) : ''
    },
    createTime() {
      let _createTime = '';
      if(this.params.orderId) {
        if(this.contractParams.createTime) {
          _createTime = moment(this.contractParams.createTime).format('YYYY 年 MM月 DD日');
        }
      }else {
        _createTime = moment().format('YYYY 年 MM月 DD日');
      }
      return _createTime;
    }
  },
  watch: {
    popupVisible(val) {
      if(val) {
        this.contractParams = this.params;
        this.getContractNumber();
      }
      if(!this.pay) return;
      if(!val && this.contractTime) {
        window.clearInterval(this.contractTimer);
        this.contractTimer = null;
        this.contractTime = 5;
      }
      if(val && !this.contractTimer) {
        this.contractTimer = window.setInterval(() => {
          if(this.contractTime) {
            this.contractTime--;
          }else {
            window.clearInterval(this.contractTimer);
          }
        }, 1000);
      }
    }
  },
  methods: {
    popupShow() {
      this.popupVisible = true;
    },
    popupHide() {
      this.popupVisible = false;
    },
    numTransform(n) {
      if(!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)) return;
      let unit = "京亿万仟佰拾兆万仟佰拾亿仟佰拾万仟佰拾元角分", str = "";
      n += "00";
      let p = n.indexOf('.');
      if(p>=0) {
        n = n.substring(0, p) + n.substr(p+1, 2);
      }
      unit = unit.substr(unit.length - n.length);	
      for(var i=0; i < n.length; i++) {
        str += '零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i)) + unit.charAt(i);
      }
      return str.replace(/零(仟|佰|拾|角)/g, "零").replace(/(零)+/g, "零").replace(/零(兆|万|亿|元)/g, "$1").replace(/(兆|亿)万/g, "$1").replace(/(京|兆)亿/g, "$1").replace(/(京)兆/g, "$1").replace(/(京|兆|亿|仟|佰|拾)(万?)(.)仟/g, "$1$2零$3仟").replace(/^元零?|零分/g, "").replace(/(元|角)$/g, "$1整");
    },
    getContractNumber() {
      if(!this.params.orderId) return;
      this.ajax({
        url: "/newapp/software/service/getJuKeBaoContract.do",
        type: "post",
        data: {
          orderId: this.params.orderId,
          machineToolId: this.params.machineToolId
        },
        controlLoading: true
      }).then(res=> {
        if(res.success) {
          this.contractParams = res.resultObject || {};
        }else {
          Toast(res.msg);
        }
      }).catch(err=> {
        
      });
    }
  },
  destroyed () {
    this.contractTimer && window.clearInterval(this.contractTimer);
  }
};
</script>

<style lang='scss' scoped>
@import "../../style/public";
.fb {font-weight: bold}
.tc {text-align: center}
.tr {text-align: right}
.t2 {text-indent: 2em}
.t4 {text-indent: 4em}
.mt20 {@include remCalc(margin-top, 20)}
.mb20 {@include remCalc(margin-bottom, 20)}
.mb30 {@include remCalc(margin-bottom, 30)}
.mb50 {@include remCalc(margin-bottom, 50)}
.pl35 {@include remCalc(padding-left, 35)}
.underline {
  @include remCalc(width, 300);
  display: inline-block;
  text-align: center;
  border-bottom: 1px solid #666;
  // @include thin-border(true, true, bottom);
}
.f16{
  // @include remCalc(font-size, 16, !important);
  div {
    position: relative;
    @include remCalc(left, 35);
    @include remCalc(margin-left, -35);
    // @include remCalc(font-size, 16, !important);
	  transform: scale(0.8) translate3d(0,0,0);
    transform-origin: left;
  }
}
table {
  width: 100%;
  border-collapse: collapse;
  td {
    @include remCalc(padding, 10, 0, 10, 5);
    border: 1px solid #ccc;
    &.bg {
      background: #F6F6F6;
    }
  }
}
.contract-view {
  width: 100%;
  height: 100%;
  .page-body {
    @include remCalc(font-size, 20);
    @include remCalc(padding, 20, 20, 120);
    p {
      @include remCalc(margin-top, 20);
    }
    .contract-title {
      font-weight: bold;
      @include remCalc(margin-top, 30);
    }
  }
  .btn-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 0;
    @include thin-border(true,true);
    > div {
      flex: 1;
      @include remCalc(font-size, 36);
      @include remCalc(height, 88);
      @include remCalc(line-height, 88);
      text-align: center;
      background: #459dff;
      color: #fff;
      &::before{
        border-color: #459dff;
      }
      &::after{
        border-color: #459dff;
      }
      &.disabled {
        background: #ccc;
        color: #fff;
      }
    }
  }
}
</style>